<template>
  <div>
    <el-breadcrumb separator="/" style="margin-top: 20px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>促销活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>编辑</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :model="ruleForm" label-width="120px" ref="ruleForm" class="demo-ruleForm">
      <p>预售活动基本信息</p>
      <el-form-item label="分公司" v-show="this.branchId === 1">
        <el-select v-model="ruleForm.branch" placeholder="请选择分公司">
          <el-option
            v-for="item in branchList"
            :label="item.branch_Name"
            :value="item.branch_Id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="一级客资类型">
        <el-select v-model="ruleForm.client" multiple>
          <el-option
            v-for="item in clientList"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-col :span="5">-->
      <el-form-item prop="" label="预售开始时间">
        <el-date-picker type="date" placeholder="请选择时间" value-format="yyyy-MM-dd" v-model="ruleForm.advanceStart"></el-date-picker>
      </el-form-item>
      <!--</el-col>-->
      <!--<el-col class="line" :span="2">-</el-col>-->
      <el-form-item prop="" label="结束时间">
        <el-date-picker type="date" placeholder="请选择时间" value-format="yyyy-MM-dd" v-model="ruleForm.advanceEnd"></el-date-picker>
      </el-form-item>
      <!--<el-col :span="5">-->
        <el-form-item prop="" label="配送开始时间">
          <el-date-picker type="date" placeholder="请选择时间" value-format="yyyy-MM-dd" v-model="ruleForm.deliveryStart"></el-date-picker>
        </el-form-item>
      <!--</el-col>-->
      <!--<el-col class="line" :span="2">-</el-col>-->
      <el-form-item prop="" label="结束时间">
        <el-date-picker type="date" placeholder="请选择时间" value-format="yyyy-MM-dd" v-model="ruleForm.deliveryEnd"></el-date-picker>
      </el-form-item>
      <el-form-item label="活动说明" prop="desc">
        <el-input type="textarea" v-model="ruleForm.explain" style="width: 500px"></el-input>
      </el-form-item>
      <p>商品信息</p>
      <el-table
        :data="tableData"
        max-height="200"
        border
        style="width: 100%; margin-top: 10px">
        <el-table-column
          prop="id"
          label="商品ID"
          align="center"
          width="">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名"
          align="center"
          width="">
        </el-table-column>
      </el-table>
      <el-form-item style="margin-top: 30px">
        <el-button @click="submit">提交</el-button>
        <router-link :to="{path: 'advanceSale'}">
          <el-button>取消</el-button>
        </router-link>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import { apiURL } from '../../config/settings.js'
  import { cms } from '../../config/proxy.js'
  import { mapState } from 'vuex'
  export default {
    data () {
      return {
        ruleForm: {
          branch: '',
          client: '',
          advanceStart: '',
          advanceEnd: '',
          explain: '',
          deliveryStart: '',
          deliveryEnd: ''
        },
        clientList: [],
        branchList: [],
        tableData: [],
//      路由参数
        data: ''
      }
    },
    methods: {
      submit () {
        const Data = {
          editBy: this.userName,
          distributionEndTime: this.ruleForm.deliveryEnd,
          distributionStartTime: this.ruleForm.deliveryStart,
          endTime: this.ruleForm.advanceEnd,
          explain: this.ruleForm.explain,
          preSaleId: this.data.row.id,
          startTime: this.ruleForm.advanceStart,
          userType: this.ruleForm.client.join(',')
        }
        console.log(Data)
        cms.edit(Data, (res) => {
          if (res.message === 'ok') {
            this.$message({
              showClose: true,
              message: '编辑成功',
              type: 'success'
            })
          } else {
            this.$message({
              showClose: true,
              message: '编辑失败',
              type: 'error'
            })
          }
        })
      }
    },
    computed: mapState({
      userId: function (state) {
        if (!state.user.info.branchId) {
          this.$store.dispatch('SET_TOKEN')
        }
        return state.user.info.branchId
      },
      userName: function (state) {
        if (!state.user.info.user_name) {
          this.$store.dispatch('SET_TOKEN')
        }
        return state.user.info.user_name
      },
      branchId: function (state) {
        if (!state.user.info.branchId) {
          this.$store.dispatch('SET_TOKEN')
        }
        return state.user.info.branchId
      }
    }),
    created () {
      this.data = this.$route.params
      apiURL.detail = '/preSale/preSaleDetail/' + this.$route.params.row.id
//    请求详情
      cms.detail({}, (res) => {
        console.log(res)
        if (res.message === 'ok') {
          this.ruleForm = {
            branch: res.content.branchName,
            client: res.content.userTypes,
            advanceStart: res.content.startTime,
            advanceEnd: res.content.endTime,
            explain: res.content.explain,
            deliveryStart: res.content.distributionStartTime,
            deliveryEnd: res.content.distributionEndTime
          }
          this.tableData = [
            {
              id: res.content.productId,
              name: res.content.productName
            }
          ]
        } else {
          this.$message({
            showClose: true,
            message: '请求服务器失败',
            type: 'error'
          })
        }
      })
      //    分公司
      cms.getBranch({}, (res) => {
        if (res.message === 'ok') {
          this.branchList = res.content
        }
      })
//    客资
      cms.client({}, (res) => {
        if (res.message === 'ok') {
          this.clientList = res.content
        }
      })
    }
  }
</script>
<style>
  .dialog .el-form--inline div {
    display: inline-block;
    float: left;
  }
</style>
